<template>
  <div class="centre">
    <p class="gnjpP">国内机票</p>
    <div class="fgCon">
      <div class="centre2">
        <ElForm :model="dateForm" label-width="70px">
          <ElFormItem label="">
            <ElRadioGroup v-model="dateForm.noe">
              <ElRadio label="单程"></ElRadio>
              <ElRadio label="往返"></ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="出发城市" class="hfather">
            <ElInput
              v-model="dateForm.startCity"
              placeholder="中文/拼音/简拼"
              @focus="blockImg(0)"
              @blur="isFocus ? '' : (currentIndex = -1)"
            ></ElInput>
            <city-list
              class="cityImg"
              v-show="currentIndex == 0"
              @mouseover.native="blockImg(0)"
              @mouseout.native="NoneImg"
            ></city-list>
            <div class="huan">
              <div class="border"></div>
              <div class="hText">换</div>
            </div>
          </ElFormItem>
          <ElFormItem label="到达城市">
            <ElInput
              v-model="dateForm.endCity"
              placeholder="中文/拼音/简拼"
              @focus="blockImg(1)"
              @blur="isFocus ? '' : (currentIndex = -1)"
            ></ElInput>
            <city-list
              class="cityImg"
              v-show="currentIndex == 1"
              @mouseover.native="blockImg(1)"
              @mouseout.native="NoneImg"
            ></city-list>
          </ElFormItem>
          <ElFormItem label="出发日期">
            <el-date-picker
              v-model="dateForm.startDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </ElFormItem>
          <ElFormItem
            label="返回日期"
            :class="{ tColor: dateForm.noe == '单程' }"
          >
            <el-date-picker
              v-model="dateForm.endDate"
              type="date"
              placeholder="yyyy-mm-dd"
              @focus="retDate"
            >
            </el-date-picker>
          </ElFormItem>
          <ElFormItem label="">
            <ElRadio
              label="1"
              v-model="dateForm.is"
              @click.native.prevent="radioChange"
            >
              携带儿童 (2-12岁)
              <i class="el-icon-warning el-icon--right">
                <div class="buy">
                  <h2>儿童票购票说明</h2>
                  <p>
                    <strong>儿童票(2-12岁，按乘机当天的实际年龄计算)</strong
                    ><br />
                    1.
                    2岁(含)-12岁(不含)请购买儿童票。票价为成人全价票的50%，不收取机场建设费，燃油费收取成人的50%。暂不支持儿童购买成人折扣票。<br />
                    2.
                    购买儿童票时需同时购买成人票，一个成人最多携带两名儿童。已购买完成人票想要再补订儿童票时，请直接联系相应航空公司。<br />
                    3.
                    购买儿童票时可选择证件类型为身份证(填写户口本上登记的身份证号)，乘机时可用户口本登机。<br />
                    4.
                    在新增联系人时正常录入乘机人姓名和证件号码即可，系统会根据出生日期和乘机日期自动判断所选乘客是否为儿童，并计算相应的票价。
                  </p>
                </div>
              </i>
            </ElRadio>
          </ElFormItem>
          <ElFormItem label="">
            <a href="#" class="seo">搜索</a>
          </ElFormItem>
        </ElForm>
      </div>
      <a>
        <img
          width="620"
          height="350"
          src="https://b1-q.mafengwo.net/s15/M00/C4/76/CoUBGV4O9suAX0ViAAHIIQPFJ1s41.jpeg"
          alt=""
          srcset=""
        />
      </a>
    </div>
    <div class="flight-footer">
      <div><i></i> 100%航协认证</div>
      <div><i></i> 出行保证</div>
      <div>
        <i></i>
        <span>
          7x24小时服务
          <br />
          <strong>4006345678转2</strong>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import cityList from "components/flight/ft_cityList.vue";

export default {
  data() {
    return {
      dateForm: {
        startCity: "",
        endCity: "",
        startDate: new Date(),
        endDate: "",
        noe: "单程",
        is: "",
      },
      currentIndex: -1,
      isFocus: false,
    };
  },
  components: {
    cityList,
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "合肥市" },
        { value: "合肥市" },
        { value: "合肥市" },
        { value: "合肥市" },
        { value: "合肥市" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    radioChange() {
      if (this.dateForm.is == "") {
        console.log(this.dateForm.is);
        this.dateForm.is = "1";
      } else {
        console.log(this.dateForm.is);
        this.dateForm.is = "";
      }
    },
    retDate() {
      console.log("aaaaa");
      this.dateForm.noe = "往返";
    },
    blockImg(index) {
      this.currentIndex = index;
      this.isFocus = true;
    },
    NoneImg() {
      this.isFocus = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.centre {
  width: 1000px;
  margin: 0 auto;
  .flight-footer {
    display: flex;
    background-color: #f6f6f6;
    align-items: center;
    height: 58px;
    width: 998px;
    border: 1px solid #e5e5e5;
    text-align: center;
    font-size: 16px;
    div {
      width: 33.3%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        display: inline-block;
        background-image: url("https://b2-q.mafengwo.net/s14/M00/80/C2/wKgE2l0do-GAczUGAAAaNUcOHfo497.png");
        background-size: auto;
        background-size: auto;
        vertical-align: middle;
        width: 40px;
        height: 34px;
        margin-right: 15px;
        background-position: 0 -90px;
      }
      &:nth-child(2) {
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 5px;
          width: 1px;
          height: 28px;
          background-color: #d1d1d1;
        }
        i {
          background-position: -60px -90px;
        }
      }
      &:nth-child(3) {
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 5px;
          width: 1px;
          height: 28px;
          background-color: #d1d1d1;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          line-height: 19px;
          strong {
            color: #ff9d00;
            font-weight: norma;
            font-size: 14px;
            line-height: 16px;
          }
        }

        i {
          background-position: -120px -90px;
        }
      }
    }
  }
  .centre2 {
    margin-bottom: 15px;
    padding: 19px 20px 13px;
    width: 320px;
    max-height: 350px;
    background: #fff;
    border: 2px solid #ff9d00;
    display: inline-block;
    .seo {
      cursor: pointer;
      display: block;
      text-align: center;
      line-height: 40px;
      width: 222px;
      height: 40px;
      background: #ff9d00;
      border-radius: 1px;
      color: #fff;
      font-size: 18px;
      padding-left: 15px;
      box-sizing: border-box;
      &::before {
        content: "";
        background-image: url("https://n4-q.mafengwo.net/s14/M00/CB/5A/wKgE2l0kC4yAWAmgAAADgtoCHuM122.png");
        background-size: 100% 100%;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 8px;
        left: 70px;
      }
    }
  }
  .gnjpP {
    position: relative;
    margin-left: 50px;
    font-size: 20px;
    padding: 15px 0;
    color: #666666;
    font-size: 18px;
    &::before {
      content: "";
      position: absolute;
      top: 16px;
      left: -28px;
      width: 7px;
      height: 24px;
      display: inline-block;
      padding-left: 20px;
      background-image: url("https://b2-q.mafengwo.net/s14/M00/80/C2/wKgE2l0do-GAczUGAAAaNUcOHfo497.png");
      background-repeat: no-repeat;
    }
  }
}
.fgCon {
  display: flex;
  justify-content: space-between;
  & > a {
    display: inline-block;
  }
}
/deep/ .el-form-item {
  margin-bottom: 10px;
  .el-radio-group {
    margin-bottom: 10px;
    span {
      font-size: 16px;
      color: #717376;
    }
  }
  .el-form-item__label {
    text-align: left;
  }
}
/deep/ .el-input__inner {
  max-width: 222px;
}
/deep/ .el-radio__label {
  font-size: 12px;
  color: #717376;
}
/deep/ .el-date-editor.el-input {
  width: 100%;
  max-width: 222px;
}
.hfather {
  position: relative;
  .huan {
    width: 40px;
    height: 50px;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateX(-27px);
    .border {
      width: 20px;
      height: 100%;
      border: 1px solid #e5e5e5;
      border-left: 0;
    }
    .hText {
      width: 21px;
      height: 21px;
      background-color: #cecece;
      color: #fff;
      font-size: 12px;
      line-height: 21px;
      text-align: center;
      border-radius: 2px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }
  }
}
/deep/
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background-color: #ff9d00;
  border-color: #ff9d00;
}
/deep/ .el-radio__inner:hover {
  border-color: #ff9d00;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #ff9d00;
}
/deep/ .tColor {
  .el-form-item__label {
    color: #bdbfc2;
  }
}
/deep/ .el-icon-warning {
  font-size: 13px;
  color: #ccc;
  cursor: default;
}
.buy {
  width: 520px;
  height: 207px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 3px 1px #ccc;
  z-index: 999;
  position: absolute;
  left: 44px;
  top: 15px;
  display: none;
  h2 {
    color: #21272e;
    font-size: 14px;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 16px;
  }
  p {
    white-space: break-spaces;
    color: #21272e;
    font-size: 12px;
    line-height: 17px;
  }
}
/deep/ .el-icon-warning {
  &:hover {
    .buy {
      display: block;
    }
  }
}
.cityImg {
  position: absolute;
  z-index: 999;
  // cursor: pointer;
}
.isAction {
  display: block !important;
}
</style>